<!-- 菜单悬浮的原理: 通过给菜单添加position:sticky实现, 用法超简单, 仅APP端的低端机不兼容 https://caniuse.com/#feat=css-sticky -->
<template>
	<view>
		<view class="sticky-tabs">
			<!-- <me-tabs v-model="tabIndex" nameKey='title' :tabs="tabs" @change="tabChange"></me-tabs> -->
			<view class="padding-tb-sm bg">
				<view class="tui-tabs" style="width: 100%;">
					<scroll-view id="tab-bar" scroll-with-animation class="tui-scroll-h" :scroll-x="true"
						:show-scrollbar="false">
						<view style="display: flex;width: 100%;white-space: nowrap;overflow-x: auto;">
							<view :key='index' v-for="(item, index) in tabs"
								style="width:30%;margin-left: 16upx;text-align: center" :id="item.id"
								:data-current="index" @tap="tabChange(item)">
								<view class="nameclore" :class="{ 'tui-tab-item-title-active': tabIndex == item.id }">
									{{ item.title }}
								</view>
								<view class="weix" v-if="tabIndex == item.id">
									<image src="../../static/images/index/indexbottom.png"></image>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>

		<view v-if="goods.length > 0" class="margin-lr-sm margin-top-16 padding-sm bg radius"
			v-for="(item,index) in goods" :key='index' @click="goNav('/my/order/pay?id='+item.ordersId+'&isTrue=1')">
			<view class="flex justify-between">
				<view class="text-blue" v-if="item.state ==0">待付款</view>
				<view class="text-blue" v-if="item.state ==1">进行中</view>
				<view class="text-blue" v-if="item.state ==2">已完成</view>
				<view class="text-blue" v-if="item.state ==4">待服务</view>
				<view class="text-blue" v-if="item.state ==3" style="color: #999999;">已取消</view>
				<view style="color: #1E1F31;">{{item.updateTime}}</view>
			</view>
			<view class=" u-flex u-p-t-30" style="align-items: start;">
				<view class="u-m-r-10">
					<u-avatar :src="item.homepageImg?item.homepageImg: '../../static/logo.png'" mode="square"
						size="100">
					</u-avatar>
				</view>
				<view class="u-flex-1 text-white margin-left-xs">
					<view class="text-30  text-bold u-line-1" style="width: 560rpx;">{{item.myLevel}}</view>
					<view v-if="item.serviceMethod ==='1'" class="u-font-14 margin-top-xs u-tips-color flex justify-between">
						服务地址：{{item.city}}{{item.district}}{{item.detailsAddress}}
					</view>
				</view>
			</view>
			<view class="flex u-p-t-20 justify-between align-center">
				<view class="text-white " v-if="item.state != 2">
					实付:<text class="text-df">￥</text>
					<text class="text-xl text-bold" v-if="item.paySumMoney">{{item.paySumMoney}}</text>
					<text class="text-xl text-bold" v-else>{{item.payMoney}}</text>
					元
				</view>

				<view class="flex">
					<u-button v-if="item.state == 0||item.state == 4" :custom-style="customStyle" shape="circle"
						:plain="true" @click.stop="cancelOrder(item)">取消订单</u-button>
					<u-button v-if="item.state == 0" :custom-style="customStyle" shape="circle" :plain="true"
						@click.stop="goNav('/my/order/pay?id='+item.ordersId+'&isTrue=0')">去支付</u-button>
					<u-button v-if="item.state == 4" :custom-style="customStyle1" shape="circle" :plain="true"
						@click.stop="goNav('/my/order/pay?id='+item.ordersId+'&isTrue=1')">查看详情</u-button>
					<u-button v-if="item.state == 1" :custom-style="customStyle1" shape="circle" :plain="true"
						@click.stop="opencode(item)">查看确认码</u-button>
					<u-button v-if="item.state == 1" :custom-style="customStyle" shape="circle" :plain="true"
						@click.stop="cancel(item)">订单完成</u-button>
					<u-button v-if="item.state == 2 && item.commentCount == 0" :custom-style="customStyle1"
						shape="circle" :plain="true"
						@click.stop="goNav('/my/order/feedback?orderTakingId='+item.orderTakingId+ '&indentNumber='+item.ordersNo+'&evaluateType=2')">
						去评价
					</u-button>
					<u-button v-if="item.state == 2 " :custom-style="customStyle1" shape="circle" :plain="true"
						@click.stop="goNav('/my/order/complain?byUserId='+item.staffUserId+'&platform=4')">
						去投诉
					</u-button>
					<u-button v-if="item.state ==1 " :custom-style="customStyle" shape="circle" :plain="true"
						@click.stop="goNav('/my/order/pay?id='+item.ordersId+'&isTrue=1')">
						补费
					</u-button>
				</view>
			</view>
		</view>
		<u-popup v-model="showcode" mode="center" border-radius="14" :closeable="true" width="520">
			<view
				style="width: 100%;text-align: center;font-size:38rpx;font-weight: bold;margin-top:15rpx;margin-bottom: 40rpx;">
				确认码
			</view>
			<view class="margin-lr padding-bottom-xl text-center " style="font-size: 48rpx;font-weight: bold;">
				{{code}}
			</view>
		</u-popup>
		<empty v-if="goods.length == 0"></empty>
	</view>
</template>

<script> 
	import empty from '@/components/empty.vue'

	export default {
		components: { 
			empty
		},
		data() {
			return {
				goods: [], // 数据列表
				game: [],
				tabs: [{
					id: 0,
					title: '全部',
					status: ''
				}, {
					id: 1,
					title: '待付款',
					status: '-1'
				}, {
					id: 2,
					title: '待服务',
					status: '4'
				}, {
					id: 3,
					title: '进行中',
					status: '1'
				}, {
					id: 4,
					title: '已完成',
					status: '2'
				}, {
					id: 5,
					title: '已取消',
					status: '3'
				}],
				tabIndex: 0, // tab下标

				page: 1,
				limit: 10,
				userId: 0,
				status: 1,
				nickName: '',
				avatar: '',
				customStyle: {
					color: '#fff',
					backgroundColor: '#557EFD',
					border: "8rpx",
					// width: '180rpx',
					height: '54rpx',
					margin: "0 0 0 20rpx",
					fontSize: '26rpx',
					padding: '0rpx 30rpx'
				},
				customStyle1: {
					color: '#557EFD',
					border: '2rpx solid #557EFD',
					// backgroundColor: '#1E1F31',
					border: "8rpx",
					// width: '180rpx',
					height: '54rpx',
					margin: "0 0 0 20rpx",
					fontSize: '26rpx',
					padding: '0rpx 30rpx'
				},
				showcode: false,
				code: ''
			}
		},
		onLoad(option) {
			// this.$queue.showLoading("加载中...");
			this.userId = uni.getStorageSync('userId')
			this.nickName = uni.getStorageSync('nickName')
			if (option.index) {
				this.tabIndex = option.index
				this.goods = []
				this.page = 1
				this.getlist()
			}
		},
		onShow() {
			this.goods = []
			this.page = 1
			this.getlist()
		},
		methods: {
			opencode(e) {
				this.code = e.code
				this.showcode = true
			},
			getlist() {
				uni.showLoading({
					title:'加载中...'
				})
				let curTab = this.tabs[this.tabIndex].status
				
				let data = {
					status: curTab,
					page: this.page,
					limit: this.limit
				}
				this.$Request.get('/app/orders/selectMyOrder', data).then(res => {
					if (res.code == 0) {

						for (var index in res.data.list) {
							if (res.data.list[index].gameName) {
								let gameNameList = res.data.list[index].gameName.split(",");
								res.data.list[index].gameName = gameNameList;
								this.game = res.data.list[index].gameName
							} else {
								this.game = res.data.list[index].gameName
							}
						}
						if (this.page == 1) {
							this.goods = res.data.list;
						} else {
							this.goods = [...this.goods, ...res.data.list]; //追加新数据
						}
					}
					uni.hideLoading();
					uni.stopPullDownRefresh()
				})
			},
			// 切换菜单
			tabChange(tab) {
				this.tabIndex = tab.id
				this.goods = []; // 置空列表,显示加载进度条
				this.page = 1
				this.getlist()
			},
			// 取消订单
			cancelOrder(e) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确认取消订单吗?',
					success: function(rese) {
						if (rese.confirm) {
							//检查订单状态
							that.$Request.get('/app/orders/queryOrders', {
								id: e.ordersId
							}).then(res => {
								if (res.code == 0) {
									let order = res.data
									switch (order.state) {
										case '1': //进行中
											that.$queue.showToast('很抱歉订单已开始服务，无法操作')
											that.page = 1
											that.getlist()
											break;
										case '0': //待付款
											that.changeOrderState(e.ordersId, '3');
											break;
										case '2': //完成了
											that.$queue.showToast('很抱歉订单已完成啦，无法操作')
											that.page = 1
											that.getlist()
											break;
										case '3': //取消了
											that.$queue.showToast('很抱歉订单已被取消，无法操作')
											that.page = 1
											that.getlist()
											break;
										case '4': //待服务
											that.changeOrderState(e.ordersId, '3');
											break;
									}

								}
							})
						} else if (rese.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			// 完成订单
			cancel(e) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '订单完成后款项将支付给服务方，确认完成订单吗?',
					success: function(rese) {
						if (rese.confirm) {
							//检查订单状态
							that.$Request.get('/app/orders/queryOrders', {
								id: e.ordersId
							}).then(res => {
								if (res.code == 0) {
									let order = res.data
									switch (order.state) {
										case '1': //进行中
											that.changeOrderState(e.ordersId, '2');
											break;
										case '2': //完成了
											that.$queue.showToast('很抱歉订单已完成啦，无法操作')
											that.page = 1
											that.getlist()
											break;
										case '3': //取消了
											that.$queue.showToast('很抱歉订单已被取消，无法操作')
											that.page = 1
											that.getlist()
											break;
									}

								}
							})
						} else if (rese.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			//统一处理订单状态
			changeOrderState(id, status) {
				let that = this;
				let data = {
					id,
					status
				}
				that.$Request.get('/app/orders/cancelOrder', data).then(res => {
					if (res.code == 0) {
						that.page = 1
						that.getlist()
					} else {
						that.$queue.showToast(res.msg)
					}
				})
			},
			//删除
			delOrder(e) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定删除订单吗?',
					success: function(res) {
						if (res.confirm) {
							let data = {
								id: e.ordersId,
							}
							that.$Request.get('/app/orders/deleteOrder', data).then(res => {
								if (res.code == 0) {
									uni.showToast({
										title: "删除成功"
									})
									that.page = 1
									that.getlist()
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			goNav(url) {
				uni.navigateTo({
					url
				})
			}
		},
		onReachBottom: function() {
			this.page = this.page + 1;
			this.getlist()
		},
		onPullDownRefresh: function() {
			this.page = 1;
			this.getlist()
		},
	}
</script>

<style lang="scss">
	/*
	sticky生效条件：
	1、父元素不能overflow:hidden或者overflow:auto属性。(mescroll-body设置:sticky="true"即可, mescroll-uni本身没有设置overflow)
	2、必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
	3、父元素的高度不能低于sticky元素的高度
	4、sticky元素仅在其父元素内生效,所以父元素必须是 mescroll
	*/
	.sticky-tabs {
		z-index: 990;
		position: sticky;
		top: var(--window-top);
		// background-color: #fff;
	}

	// 使用mescroll-uni,则top为0
	.mescroll-uni,
	/deep/.mescroll-uni {
		.sticky-tabs {
			top: 0;
		}
	}

	.demo-tip {
		padding: 18upx;
		font-size: 24upx;
		text-align: center;
	}

	page {
		background-color: #F7F7F7;
	}

	.bg {
		background-color: #FFFFFF;
	}

	// .u-size-default {
	// 	// background: #557EFD !important;
	// 	border:1rpx solid #557EFD !important;
	// 	color: #557EFD !important;
	// 	background-color: #FFFFFF !important;
	// }
	.weix image {
		width: 54upx;
		height: 15upx;
	}

	.nameclore {
		text-align: center;
		font-size: 28upx;
		padding: 0rpx 20rpx;
	}

	.nameclore.tui-tab-item-title-active {
		color: #5E81F9;
		font-size: 30upx;
	}
</style>